<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 真实DOM  -->
    <div id="app"></div>

    <!-- <div>
       &lt;a&gt;stranger link &lt;/a&gt;
   </div> -->

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>


    <script type="text/babel">
        // var e = <h1>helloWorld</h1>  // jsx =>elment
        // console.log(e); // vDOM  

        01 变量
        const name  ='react'
        var e = <h1>hello {name}</h1>

        02 计算
        var e = <h1>hello {2021+1}</h1>

        03 jsx 语法中 调用函数
        function formatName(user){
            return user.firstname +'-'+user.lastname
        }

        var user = {
            firstname:'Will',
            lastname:'Yu'
        }

        var e = <h1>hello {formatName(user)}</h1>

        04 在函数中 使用jsx语法(里面又调用函数)
        htmlcssjs- html css js- component(htmlcssjs)-component (all in js)

        function formatName(user){
            return user.firstname +'-'+user.lastname
        }

        function greeting(user){
            if(user){
                return <h1>hello {formatName(user)}</h1>
            }else{
                return <h1>hello stranger</h1>
            }
        }

        var user = {
            firstname:'Will',
            lastname:'Yu'
        }
        var user = null
        const e=greeting(user)

        // 05 添加属性
        var user = {
            firstname: 'Will',
            lastname: 'Yu',
            avatar: 'https://img0.baidu.com/it/u=1461773104,1813732012&fm=253&fmt=auto&app=138&f=JPG?w=658&h=494'
        }

          const e = <img src={user.avatar} />

          const e = <div>
                <label  htmlFor='name'>姓名</label>
                <input type='text' id='name'/>
            </div>

        //注意： htmlFor  className  

        //06 添加样式
        var style = { width: 100, height: 100 }
        const e = <img src={user.avatar} style={style}/>
        const e = <img src={user.avatar} style={{width:100,height:100}}/>


        // 07 包裹元素
        // const e = <div><h1>hello</h1><h1>world</h1></div> //JSX expressions must have one parent element

        //08 安全转义 : jsx 有安全机制 对于字符串里的标签 进行转义
        // var content = '<a>stranger link</a>'
        // // 自动转义
        // const e = <div>{content}</div> 

        //不需要转义
        // var content = '<a href="http://www.baidu.com">baidu</a>'
        // const e = <div dangerouslySetInnerHTML={{__html:content}}></div> 



        // 09 循环
        var e = 
            <ul>
                <li>eatting</li>
                <li>playing</li>
                <li>sleeping</li>
            </ul>

        // 数据
        var hobby = ['eatting', 'playing', 'sleeping']

        // 组装 ： 元素
        let eArray = []
        for (let i = 0; i < hobby.length; i++) {
                const element = <li>{hobby[i]}</li>
                eArray.push(element)
         }

         var e = <ul>{eArray}</ul>

        function getElements(){
            let eArray = []
            for (let i = 0; i < hobby.length; i++) {
                const element = <li>{hobby[i]}</li>
                eArray.push(element)
            }
            return eArray
        }

          var e = <ul>{getElements()}</ul>



        // 注意：name
        var name = ['张三', '李四', '王五']
         
        // console.log(typeof name); //string
        // console.log(this); //undifined

        let eArray = []
        for (let i = 0; i < name.length; i++) {
            const element = <li>{name[i]}</li>
            eArray.push(element)
        }

        var e = <ul>{eArray}</ul>

        //元素=普通js对象=虚拟DOM   => 渲染到 app 容器里
        ReactDOM.render(e, document.getElementById('app'))
    </script>

    <script>
         // 注意：name
         var name = ['张三', '李四', '王五']
         
         console.log(typeof name);
         console.log(this.name);
         console.log(typeof this.name);

         // window.name  只能接受字符串

         for (let i = 0; i < name.length; i++) {
            console.log(name[i]);
        }

    </script>
</body>

</html>